<template>
  <div class="left-scpjsj">
    <div class="tab-title" :class="isHall?'tab-title1':''">
      <span class="dec">近年塘栖枇杷市场平均售价</span>
      <span class="unit">(元/斤)</span>
    </div>
    <div class="tab-content" @click="showMask">
      <div ref="myChart" :style="{height:isHall? '262px':'232px', width: '100%'}"></div>
    </div>
    <div class="mask-detail" v-if="show">
         <avPriceMask @closeMask="closeMask" :yearList="yearList" :defaultYear="defaultYear" />
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import SelectYear from '../SelectYear.vue'
import avPriceMask from './avPriceMask.vue'
import {queryMarketAveragedp} from '@/api/dashboards'
export default {
    components:{SelectYear,avPriceMask},
    props:{
        canShow:{
            type:Boolean
        },
        canShow2:{
            type:Boolean
        },
         isHall:{
            type:Number
        }
    },
    data(){
    return{
        defaultYear:undefined,
        show:false,
        yearList:[],
        Xyear:[],
        Ynum:[],
        series:[],
     }
    },
  watch: {
    canShow:{
      immediate: true,
      handler: function(val) {
          if(val){
              this.show = false
          }
      }
      },
    canShow2:{
      immediate: true,
      handler: function(val) {
          if(val){
              this.show = false
          }
      }
      },
    isHall:{
        immediate: true,
        handler: function(val) {
            if(val){
            }
        }
    },
  },
  created(){
    this.getDate()
  },

  mounted() {
    this.queryMarketAveragedp()
  },
  methods: {
    async queryMarketAveragedp() {
        let res = await queryMarketAveragedp()
        let Xyear = res.result&&res.result.Xyear&&res.result.Xyear.length&&res.result.Xyear
        if(Xyear.length>5){
            this.Xyear = Xyear.slice(0,5)
        }else{
            this.Xyear = Xyear
        }
        this.Xyear= this.Xyear.sort((x,y) => x - y)
        this.Xyear.map(item=>{
            const obj = {}
            obj.label = item
            obj.value = item
            this.yearList.push(obj)
        })
        this.$emit('getAvsellingYear',this.yearList)
        let Ynum = res.result&&res.result.Ynum&&res.result.Ynum.length&&res.result.Ynum
        if(Ynum.length>5){
            this.Ynum = Ynum.slice(0,5)
        }else{
            this.Ynum = Ynum
        }
        this.Ynum.map(item=>{
            const obj ={}
            obj.name = item.name
            obj.data = item.data.map(Number)
            // obj.data = item.data.map(Number).sort((x,y) => x - y)
            obj.type = "line"
            obj.smooth = false
            obj.showSymbol = false
            obj.lineStyle = {
                normal: {
                width: 3
                }
            }
            this.series.push(obj)
        })
        this.initChart()
    },
    showMask(){
        if(this.isHall){
            return
        }else{
            this.show = true
            this.$emit('getShow1',this.show)
        }
    },
    getDate(date) {
        this.selectYear = date
    },
    closeMask(){
        this.show = false
    },
    initChart() {
        let myChart = echarts.init(this.$refs.myChart)
        var option = {
            color: ['#4F4CFF', '#04E9B0', '#FF8300', '#FFC400', '#00DFFF'],
            tooltip: {
                show:false,
            },
            grid: {
                top:'8%',
                left: '5%',
                right: '10%',
                bottom: '32%',
                containLabel: true
            },
            // legend: {
            //     show:true,
            //     orient:'horizontal',
            //     bottom:'20%',
            //     icon: 'stack',
            //     itemGap:10,
            //     itemWidth:10,
            //     itemHeight:4,
            //     textStyle:{
            //         color:'#fff'
            //     },
            // },
               legend: {
                    selectedMode: false,
                    itemWidth: 10,
                    itemHeight: 4,
                    left: '5%',
                    right: '10%',
                    icon: 'stack',
                    bottom: this.isHall?'13%':'20%',
                    textStyle: {
                        fontSize: 12,
                        color: '#fff',
                    },
                    type: 'scroll', //分页类型
                    orient: 'horizontal', //横向
                    height: 50,
                    pageIconColor: '#0D99C2', //翻页箭头颜色
                    pageTextStyle: {
                        color: 'rgba(255, 255, 255, 0.6)', //翻页数字颜色
                    }, //翻页数字设置
                    pageIconSize: 13,
                    },
            xAxis: [
                {
                type: 'category',
                boundaryGap: false,
                splitLine: {
                        show: true,
                        lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                axisLine: {
                    show:true,
                    lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    lineStyle: {
                    color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                axisLabel: {
                    show: true,
                    color: 'rgba(255, 255, 255, 0.6)',
                    fontSize: 12
                },
                data: this.Xyear
                }
            ],
            yAxis: [
                    {
                    type: 'value',
                    splitNumber:3,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show:false,
                        lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                        }
                    },
                    axisLabel: { //保留一位小数
                        color: 'rgba(255, 255, 255, 0.6)',
                    //   formatter: function (value, index) { 
                    //       console.log(value);          
                    //       return value.toFixed(1);      
                    //      }                
                }
                },
        ],
            series: this.series
        };
      myChart.setOption(option)
      myChart.off('click'); //防止触发两次点击事件
        myChart.getZr().on('click', (params) => {
            let pointInPixel = [params.offsetX, params.offsetY];
            if (myChart.containPixel('grid', pointInPixel)) {
                let pointInGrid = myChart.convertFromPixel({
                    seriesIndex: 0
                }, pointInPixel);
                let xIndex = pointInGrid[0]; //索引
                let handleIndex = Number(xIndex);
                // let seriesObj = myChart.getOption(); //图表object对象
                var op = myChart.getOption();
                //获得图表中点击的列
                var year = op.xAxis[0].data[handleIndex];  //获取点击的列名
                console.log(year);
                this.defaultYear = year
            };
        })
    },
  },
}
</script>
<style lang="less" scoped>
.left-scpjsj {
  width: 360px;
  height: 222px;
  color: #fff;
  .tab-title1{
      padding: 24px 10px 0 24px !important;
  }
  .tab-title {
      padding: 14px 10px 0 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    .dec {
        width: 196px;
        height: 14px;
        font-size: 14px;
        font-weight: 600;
        color: #FFFFFF;
        line-height: 14px;
    }
    .unit{
        padding-right: 15px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.6);
    }
   
  }
  .tab-content {
    width: 360px;
    position: relative;
  
  }
    .mask-detail{
        width: 360px;
        height: 295px;
        background: rgba(11, 17, 51, 0.85);
        position: relative;
        top: -123%;
        left: 105%;
        z-index: 1000;
    }
}
</style>